<template>
  <div class="dish-section">
    <!-- 推荐菜 -->
    <div class="section-header">
      <h3 class="section-title">推荐菜</h3>
      <span class="section-more">查看更多 ></span>
    </div>

    <div class="recommend-list">
      <div class="recommend-item" v-for="(dish, index) in recommendedDishes" :key="index">
        <div class="image-wrapper">
          <div class="image" :style="{ backgroundImage: `url(${sharedImage})` }">
            <div class="image-overlay">👍 {{ dish.likes }}人推荐</div>
          </div>
        </div>
        <div class="name">{{ dish.name }}</div>
      </div>
    </div>
    <div class="scroll-tip">← 滑动查看更多菜品 →</div>

    <!-- 推荐菜文字列表 -->
    <div class="text-dishes">
      <span v-for="(item, index) in textDishes" :key="index">{{ item }}</span>
    </div>
    <div class="centered-link">去大众点评App查看全部714道推荐菜 ></div>

    <!-- 菜单部分 -->
    <div class="menu-section">
      <h3 class="section-title">菜单 (3)</h3>
      <div class="menu-list">
        <div class="menu-item" v-for="(src, index) in menuImages" :key="index">
          <img :src="src" alt="菜单图片" />
        </div>
      </div>
      <div class="centered-link">去大众点评App查看菜单详情 ></div>
    </div>
  </div>
</template>

<script setup>
import sharedImage from '@/assets/images/1.jpg'

const recommendedDishes = [
  { name: '冬阴功', likes: 256 },
  { name: '特色炸虾饼配甜酸酱', likes: 208 },
  { name: '猪颈肉', likes: 145 },
  { name: '香芒糯米饭', likes: 112 },
  { name: '虾酱空心菜', likes: 111 },
  { name: '菠萝饭', likes: 80 },
  { name: '红咖喱香茅辣椒炒蟹', likes: 77 },
  { name: '椰汁鸡汤', likes: 66 },
  { name: '炸鸡翅', likes: 59 },
  { name: '绿咖喱牛肉', likes: 54 },
  { name: '青木瓜沙拉', likes: 48 },
  { name: '泰式炒粉', likes: 42 },
  { name: '芒果布丁', likes: 37 },
  { name: '泰式酸辣汤', likes: 33 },
  { name: '柠檬鱼', likes: 29 },
]

const textDishes = [
  '泰式青柠汁蒸桂鱼', '黄咖喱牛腩拌饭', '红咖喱蟹', '黄咖喱YELLOW CURRY',
  '椰汁香茅黄咖喱牛肉', '泰虾-冬阴功汤', '黄咖喱洋葱炒大明虾', '前菜拼盘 MIX APPETIZER',
  '泰式黄咖喱', '泰式海鲜炒河粉配鸡蛋及碎花生',
]

const menuImages = [sharedImage, sharedImage, sharedImage]
</script>

<style scoped>
.dish-section {
  max-width: 1100px;
  margin: 16px auto;
      padding: 24px;
  font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 12px;
}

.section-more {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.recommend-list {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  scrollbar-width: thin;
}

.recommend-list::-webkit-scrollbar {
  height: 6px;
}

.recommend-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.recommend-item {
  min-width: 120px;
  flex-shrink: 0;
}

.image-wrapper {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.image {
  width: 120px;
  height: 90px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: white;
  font-size: 12px;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.name {
  font-size: 14px;
  color: #333;
  margin-top: 6px;
  text-align: center;
}

.scroll-tip {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.text-dishes {
  margin: 12px 0 8px;
  font-size: 13px;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.6;
}

.centered-link {
  color: #191c1c;
  font-size: 14px;
  margin: 12px 0;
  text-align: center;
}

.menu-section {
  border-top: 1px solid #eee;
  padding-top: 16px;
  margin-top: 16px;
}

.menu-list {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.menu-item img {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
</style>
